<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日记年的制作网页</title>
</head>
<body>
    <div class="zong">
        <p style="height: 30px;width: 30px;border: 1px solid white;line-height: 30px;">&laquo;</p>
        <p class="a"style="border 1px solid;height: 30px;width: 30px;line-height: 30px;">1</p>
        <p class="b"style="border 1px solid;height: 30px;width: 30px;line-height: 30px;">2</p>
        <p class="c"style="border 1px solid;height: 30px;width: 30px;line-height: 30px;">3</p>
        <p class="d"style="border 1px solid;height: 30px;width: 30px;line-height: 30px;">4</p>
        <p class="e"style="border 1px solid;height: 30px;width: 30px;line-height: 30px;">5</p>
        <p class="f"style="border 1px solid;height: 30px;width: 30px;line-height: 30px;">6</p>
        <p class="g"style="border 1px solid;height: 30px;width: 30px;line-height: 30px;">7</p>
        <p style="height: 30px;width:30px;border: 1px solid white;margin-left: 30px;">&raquo;</p>


    </div>
    <button type="button" onclick="lightbulb()">灯泡开关</button>
    <img id="tupian" src="d:/4233.jpg" >
    <script>
    function lightbulb(){
        let  element = document.getElementById('tupian')
        console.log(element)
        console.log(element.src.match('pic-bulbon'))
           if(element.src.match('4233')){
               element.src ="d:/2077.jpg"
           }else{
            element.src = "d:/4233.jpg"
           }
    }
    </script>

    <p class="change_color">代码</p>


    <style>
        .a{
            background-color: aqua;
        }
        .b{
            background-color: aqua;
        }
        .c{
            background-color: aqua;
        }
        .c{
            background-color: aqua;
        }
        .d{
            background-color: aqua;
        }     
        .e{
            background-color: aqua;
        }
        .f{
            background-color: aqua;
        }  
        .g{
            background-color: aqua;
        }   
        .a:hover{
            background-color: yellowgreen;
            color: aliceblue;
         }
         .b:hover{
            background-color: yellowgreen;
            color: aliceblue;
         }
         .c:hover{
            background-color: yellowgreen;
            color: aliceblue;
         }
         .d:hover{
            background-color: yellowgreen;
            color: aliceblue;
         }
         .e:hover{
            background-color: yellowgreen;
            color: aliceblue;
         }
         .f:hover{
            background-color: yellowgreen;
            color: aliceblue;
         }
         .g:hover{
            background-color: yellowgreen;
            color: aliceblue;
         }
        .zong{
            display: flex;
        }
        .change_color{
        color: yellow;
        border: 1px solid green;
        background-color:brown;
        text-align: center;
        width: 200px;
        height: 300px;
        margin: 0 auto;

    }
    </style>
</body>
</html>